<template>
  <uv-popup round="10" ref="popup" closeable mode="center" :closeOnClickOverlay="false">
    <div class="p1756444640 ">
      <div class="bfff">
        <div class="fz30 p1756446181" style="color: #727171;">选择想接的订单类型（可多选）</div>
        <div class="fac pl30 pr30 pt30 pb30">
          <div @click="tap(1)" :class="delivery_type == 1 ? 'p1756446255-active' : ''" class="p1756446255 fz32 mr20">
            物品配送
          </div>
          <div @click="tap(2)" :class="delivery_type == 2 ? 'p1756446255-active' : ''" class="p1756446255 fz32 pl30">宠物照料</div>
        </div>
        <div class="p1756445056">
          <uv-checkbox-group v-if="delivery_type == 1" activeColor="#E60012" shape="circle" iconPlacement="right"
            v-model="deliveryTypeList">
            <uv-checkbox :name="item.delivery_label"
              v-for="(item, index) in [{delivery_label: 1}, {delivery_label: 2}, { delivery_label: 3}]" :key="index">
              <div>
                <div style="display: inline;"
                  :style="{background: typeForm[item.delivery_label].bgColor, color: typeForm[item.delivery_label].color}"
                  class="fz30 p1756445661">{{typeForm[item.delivery_label].text}}</div>
              </div>
            </uv-checkbox>
          </uv-checkbox-group>
          <uv-checkbox-group v-if="delivery_type == 2" activeColor="#E60012" shape="circle" iconPlacement="right"
            v-model="deliveryTypeList">
            <uv-checkbox :name="item.delivery_label" v-for="(item, index) in [{delivery_label: 4}, {delivery_label: 5}]"
              :key="'delivery_label-' + index">
              <div>
                <div style="display: inline;"
                  :style="{background: typeForm[item.delivery_label].bgColor, color: typeForm[item.delivery_label].color}"
                  class="fz30 p1756445661">{{typeForm[item.delivery_label].text}}</div>
              </div>
            </uv-checkbox>
          </uv-checkbox-group>
        </div>
        <div class="p1756192105 fac  jcsb pl30 ">
          <div class="p1756191291  fac jcc" style="border: 2rpx solid #C9CACA;" @click="clearTap">清除选择</div>
          <div class="p1756191456 fac jcc" style="flex: 1">
            <uv-button size="mini" text="完成" @click="setDeliveryTypeTap">
              <div class="fz36 p1756193077" style="color: #fff;">完成</div>
            </uv-button>
          </div>
        </div>
      </div>
    </div>
  </uv-popup>
</template>
<script>
  import { setDeliveryType } from '@/api/neighbor.js'
  import payMixin from '../mixin/payMixin.js'
  import dataJsonMixin from '../mixin/dataJson.js'

  export default {
    props: {
      deliveryForm: {
        type: Object,
        default: {}
      }
    },
    mixins: [dataJsonMixin],
    data() {
      return {
        delivery_type: 1,
        deliveryTypeList: [],
        checkboxList: [{ delivery_label: 1 }, { delivery_label: 2 }, { delivery_label: 3 }],
      }
    },
    mounted() {

    },
    methods: {
      clearTap() {
        this.deliveryTypeList = []
      },
      closeTap() {
        this.$refs.popup.close()
      },
      openTap() {
        this.$refs.popup.open()
        this.delivery_type = this.deliveryForm.delivery_type
        if (this.deliveryForm?.delivery_label?.length) {
          this.deliveryTypeList = this.deliveryForm.delivery_label.map(i => Number(i))
        }
      },
      tap(value) {
        if (value == this.delivery_type) return
        this.delivery_type = value
        // this.deliveryTypeList = []
      },
      setDeliveryTypeTap() {
        let msg = ''
        if (!this.deliveryTypeList.length) return uni.$uv.toast('请选择配送标签')
        if(this.delivery_type == 2 && !this.deliveryTypeList.some(i => i != 1 && i !=2 && i !=3)) {
          return uni.$uv.toast('请选择配送标签')
        }
         if(this.delivery_type == 1 && !this.deliveryTypeList.some(i => i != 4 &&  i != 5)) {
          return uni.$uv.toast('请选择配送标签')
        }
        uni.hideLoading()
        uni.showLoading({ title: '加载中', mask: true })
        setDeliveryType({ delivery_type: this.delivery_type, delivery_label: this.deliveryTypeList.map(i => i) }).then(res => {
          if (res.code === 200) {
            uni.hideLoading()
            uni.$uv.toast('操作成功')
            this.$refs.popup.close()
            this.$emit('chooseDeliveryType')
          }
        })

      }
    },
  }
</script>
<style lang="scss">


</style>
<style lang="scss" scoped>
@import '../common.scss';
  .p1756444640 {
    width: 90vw;
  }

  .p1756446181 {
    border-bottom: 2rpx solid #EFEFEF;
    padding: 30rpx;
  }

  .p1756192105 {
    border-top: 2rpx solid #EFEFEF;

  }

  .p1756445661 {
    padding: 5rpx 20rpx;
    border-radius: 10rpx;

  }

  .p1756445056 {
    padding-left: 15rpx;
    padding-right: 15rpx;
    min-height: 310rpx;
  }

  .p1756446255 {
    color: #727171;


  }

  .p1756446255-active {
    color: #333;
  }

  .p1756191291 {
    width: 220rpx;
    border-radius: 10rpx;
    height: 86rpx;
    max-height: 86rpx;
    line-height: 86rpx;
    font-weight: 500;
    font-size: 36rpx;
    overflow: hidden;
    text-align: center;
  }

  .p1756191456 {
    background-color: #fff;
    width: 100%;
    font-weight: 500;
    font-size: 36rpx;
    overflow: hidden;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    padding: 30rpx;

    .p1756193077 {
      width: calc(100vw - 60rpx);
      height: 90rpx;
      max-height: 90rpx;
      line-height: 90rpx;
      width: inherit !important;
      height: inherit !important;
      background-color: #E60012;
    }
  }
</style>